<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .box{width:200px;height:200px;background: red;margin:50px;border: solid 1px black;}

        .xbox{width:100px;height:100px;margin: 30px;background: yellow;}
    </style>
</head>
<body style="height:1000px">
    <div class="box">

        <div class="xbox"></div>

    </div>
</body>
<script>

    var oBox = document.querySelector(".box");

    oBox.onmousedown = function(eve){
        var e = eve || window.event;

        // 相对于 触发 事件的元素
        // console.log(e.offsetX, e.offsetY);
        
        // 相对于 页面可视区域
        // console.log(e.clientX, e.clientY);

        // 相对于 页面
        // console.log(e.pageX, e.pageY);
        
        // 相对于 显示器
        // console.log(e.screenX, e.screenY);

        // 获取鼠标的按键：0表示左，2表示右
        // console.log(e.button);

        // 获取鼠标的按钮：1表示左，2表示右
        // console.log(e.buttons);

        // 事件目标：触发事件的元素
        // console.log(e.target);
        // console.log(e.srcElement);
        // var target = e.target || e.srcElement
        // console.log( target );

        console.log(this === e.target);

    }

    
    
</script>
</html>